<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from "vue";
import tree from "./tree.vue";
interface personnelFormItemProps {
  leader: number;
  leader_name: string
}
interface personnelFormProps {
  formInline: personnelFormItemProps;
}
import { handleTree } from "@/utils/tree";
import { deviceDetection } from "@pureadmin/utils";
import { department_list, user_list } from "@/api/user";

const props = withDefaults(defineProps<personnelFormProps>(), {
  formInline: () => ({
    leader: null,
    leader_name: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const form = reactive({
  // 左侧部门树的id
  department_belong: "",
  page: 1,
  pagesize: 999
});

const dataList = ref([]);
const loading = ref(true);

const deptData = ref([]);
const deptLoading = ref(true);

async function onSearch() {
  loading.value = true;

  const result = await user_list(toRaw(form));

  dataList.value = result.data;

  setTimeout(() => {
    loading.value = false;
  }, 500);
}

function onTreeSelect({ id, selected }) {
  form.department_belong = selected ? id : "";
  onSearch();
}

// 选择人员
function leaderSelectClick(item) {
  newFormInline.value.leader = item.id;
  newFormInline.value.leader_name = item.nickname;
}

// 清空选择人员
function clearLeader() {
  newFormInline.value.leader = null;
  newFormInline.value.leader_name = "";
}

onMounted(async () => {
  onSearch();

  // 获取部门列表
  onGetDepartmentList();
});

async function onGetDepartmentList() {
  deptLoading.value = true;
  const result = await department_list({ page: 1, pagesize: 999 });

  deptData.value = handleTree(result.data);
  deptLoading.value = false;
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <div
    :class="[
      'flex',
      'justify-between',
      'personnel',
      deviceDetection() && 'flex-wrap'
    ]"
  >
    <tree
      ref="treeRef"
      :class="[deviceDetection() ? 'w-full' : 'min-w-[180px]']"
      :treeData="deptData"
      :treeLoading="deptLoading"
      @tree-select="onTreeSelect"
    />
    <div
      v-loading="loading"
      class="h-full bg-bg_color overflow-hidden relative dataContent"
    >
      <el-scrollbar height="calc(70vh - 104px)">
        <div class="dataList">
          <div class="item bt">
            <b>昵称</b>
            <b>用户名</b>
          </div>
          <div
            class="item"
            v-for="(item, index) in dataList"
            :key="index"
            @click="leaderSelectClick(item)"
          >
            <p>{{ item.nickname }}</p>
            <p>{{ item.account }}</p>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="h-full selectList">
      <div class="bt">
        <p>已选择</p>
        <b @click="clearLeader">清空</b>
      </div>
      <div class="tag">
        <el-tag
          closable
          type="info"
          size="large"
          v-if="newFormInline.leader_name"
          @close="clearLeader"
        >
          {{ newFormInline.leader_name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.personnel {
  border: 1px solid #e5e5e5;
  margin-bottom: 16px;
}
.dataContent {
  flex: 1;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;

  .dataList {
    .item {
      display: flex;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;

      b,
      p {
        flex: 1;
        line-height: 42px;
        text-align: center;
      }
    }

    .bt {
      background: #f9fdfd;
      cursor: initial;
    }
  }
}
.selectList {
  width: 200px;
  .bt {
    display: flex;
    justify-content: space-between;
    line-height: 42px;
    border-bottom: 1px solid #eeeeee;
    padding: 0 10px;
    font-size: 13px;

    p {
      color: #8d8d8d;
    }

    b {
      cursor: pointer;
    }
  }

  .tag {
    padding: 10px;
  }
}
</style>
